<template>
    <view class="assemble-order-container">
        <view class="title-view">
            <text class="title-left" >{{assembleOrderAll.length}}人在拼团，可直接参与</text>
            <view class="content-view u-margin-left-20"></view>
            <u-icon class="collection-icon u-margin-right-10" name="more-dot-fill" size="36" @click="showPopup = true"></u-icon>
        </view>
        <u-line></u-line>
        <view class="assemble-order-list">
            <swiper autoplay="3000" vertical circular="true" class="assemble-swipe" style="height: 180rpx;">
                <swiper-item v-for="(orderList, index) in assembleOrder" :key="index">
                  <view class="assemble-order u-flex u-row-between" v-for="(order,orderIndex) in orderList" :key="orderIndex">
                      <view class="order-left u-flex" >
                          <u-image width="80rpx" height="80rpx" shape="circle" :src="order.face" v-if="order.face"></u-image>
                          <u-image width="80rpx" height="80rpx" shape="circle" src="/static/images/member/icon-noface.jpg" v-else></u-image>
                          <view class="content-view u-margin-left-20"></view>
                          <view class="member-name">{{order.name}}</view>
                      </view>
                      <view class="order-right">
                          <text class="order-text">还差{{order.required_num - order.offered_num}}人成团</text>
                          <view class="content-view u-margin-left-20"></view>
                          <view class="u-flex-1 u-flex">
                              <view class="btn u-line-1 u-flex-1" @click="toBuyNow(order)">去拼团</view>
                          </view>
                      </view>
                  </view>
                </swiper-item>
            </swiper>
        </view>
        <!-- 待成团列表 -->
        <u-popup v-model="showPopup" mode="bottom" length="70%" border-radius="20" :safe-area-inset-bottom="true" closeable close-icon-size="20">
            <view class="order-title-head" style="font-weight: 600;">
                待成团列表
            </view>
            <view class="assemble-order-list" style="padding-top: 100rpx;">
                <view class="assemble-order u-flex" v-for="(order,index) in assembleOrderAll" :key="index">
                    <view class="order-left u-flex" >
                        <u-image width="80rpx" height="80rpx" shape="circle" :src="order.face" v-if="order.face"></u-image>
                        <u-image width="80rpx" height="80rpx" shape="circle" src="/static/images/member/icon-noface.jpg" v-else></u-image>
                        <view class="content-view u-margin-left-20"></view>
                        <view class="member-name">{{order.name}}</view>
                    </view>
                    <view class="content-view u-margin-left-20"></view>
                    <view class="order-right">
                        <text class="order-text">还差{{order.required_num - order.offered_num}}人成团</text>
                        <view class="content-view u-margin-left-20"></view>
                        <view class="u-flex-1 u-flex">
                            <view class="btn u-line-1 u-flex-1" @click="toBuyNow(order)">去拼团</view>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>

    </view>
</template>

<script>
    /**
     * 商品详情页拼团订单组件
     *
     * ===== 使用场景 ======
     * 商品详情页。
     *
     * ===== 参数 =====
     * assembleOrder        部分拼团订单
     * assembleOrderAll     全部拼团订单
     */
	export default {
		data() {
			return {
                showPopup: false
			};
		},
        props: {
            assembleOrder: {
                type: Array,
                default: () => {
                    return []
                }
            },
            assembleOrderAll: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        methods: {
            toBuyNow(order) {
                this.$emit('to-assemble-buy-now', order)
            }
        }
	}
</script>

<style lang="scss">
    .order-title-head {
        position: fixed;
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-weight: 600;
        text-align: center;
        z-index: 2;
        background-color: #FFFFFF;
    }
.assemble-order-container {
    border-radius: 15rpx;
    margin-top: 23rpx;
    background-color: #FFFFFF;
    .title-view {
        padding: 30rpx;
        display: flex;
        align-items: center;
        padding-bottom: 20rpx;
        .title-left{
            color: #f42424;
            margin-left: 3rpx;
        }
        .content-view {
            flex: 1;
        }
        .title-right{
            margin-right: 20rpx;
        }
    }
    .assemble-order-list {
       background-color: #FFFFFF;
       padding: 20rpx 30rpx;
       .assemble-order {
           margin-bottom: 20rpx;
           .order-left {
               margin-left: 3rpx;
               display: flex;
               line-height: 50rpx;
           }
           .content-view {
               flex: 1;
           }
           .order-right {
               display: flex;
               margin-right: 20rpx;
               .order-text {
                   line-height: 50rpx;
               }
               .btn {
                   color: #ffffff;
                   font-size: 20rpx;
                   line-height: 50rpx;
                   padding: 0 30rpx;
                   text-align: center;
                   border-radius: 20rpx;
                   background: linear-gradient(to right, #FD5632 0%, #EF0D25 100%);
               }
           }
           .member-name{
               // flex: 1;
           }
       }
    }
}
</style>
